﻿@{
	Layout = "~/Areas/Admin/Views/Shared/_AdminContent.cshtml";
}
@section head {
	<link type="text/css" href="/dist/WebUploader/webuploader.css" />
}
@section body {
	<script type="text/javascript" src="/dist/WebUploader/webuploader.js"></script>
	<script type="text/javascript">

		function pickerFile() {
			$("#js-picker input[type='file']")[0].click();
		}

		// 文件上传
		$(function () {
			var $ = jQuery,
				$list = $('#js-thelist'),
				$btn = $('#js-upload-btn'),
				state = 'pending',
				uploader;

			uploader = WebUploader.create({
				// 不压缩image
				resize: false,
				// swf文件路径
				swf: '/dist/WebUploader/Uploader.swf',
				// 文件接收服务端。
				server: '/ThemeTemplate/UploadTemplateFile',
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#js-picker',
				// 只允许选择 .zip 压缩文件
				accept: {
					title: '压缩包',
					extensions: 'zip',
					mimeTypes: 'application/zip'
				},
				//单个文件大小限制
				fileSingleSizeLimit: 104857600,
				//上传文件数量限制
				fileNumLimit: 10,
				//上传前不压缩
				compress: false
			});

			// 当有文件添加进来的时候
			uploader.on('fileQueued', function (file) {
				$list.append('<div id="' + file.id + '" class="item">' +
					'<h4 class="info">' + file.name + '</h4>' +
					'<p class="state">等待上传...</p>' +
					'</div>');
			});

			// 文件上传过程中创建进度条实时显示。
			uploader.on('uploadProgress', function (file, percentage) {
				var $li = $('#' + file.id),
					$percent = $li.find('.progress .progress-bar');

				// 避免重复创建
				if (!$percent.length) {
					$percent = $('<div class="progress progress-striped active">' +
						'<div class="progress-bar" role="progressbar" style="width: 0%">' +
						'</div>' +
						'</div>').appendTo($li).find('.progress-bar');
				}

				$li.find('p.state').text('上传中');

				$percent.css('width', percentage * 100 + '%');
			});

			uploader.on('uploadSuccess', function (file) {
				$('#' + file.id).find('p.state').text('已上传');
			});

			uploader.on('uploadError', function (file) {
				$('#' + file.id).find('p.state').text('上传出错');
			});

			uploader.on('uploadComplete', function (file) {
				$('#' + file.id).find('.progress').fadeOut();
			});

			/**
			* 验证文件格式以及文件大小
			*/
			uploader.on("error", function (type) {
				$("#js-message").fadeIn();
				$("#js-message").attr("class", "alert alert-danger");
				$message = $("#js-message").find(".message");
				if (type == "Q_TYPE_DENIED") {
					$message.html("请上传zip格式文件");
				} else if (type == "F_EXCEED_SIZE") {
					$message.html("单个文件大小不能超过2M");
				} else {
					$message.html("上传出错！请检查后重新上传！错误代码" + type);
				}
				// 3s 后隐藏
				setTimeout(function () {
					$("#js-message").fadeOut("slow");
				}, 3000);
			});

			uploader.on('all', function (type) {
				if (type === 'startUpload') {
					state = 'uploading';
				} else if (type === 'stopUpload') {
					state = 'paused';
				} else if (type === 'uploadFinished') {
					state = 'done';
				}

				if (state === 'uploading') {
					$btn.text('暂停上传');
				} else {
					$btn.text('开始上传');
				}
			});

			$btn.on('click', function () {
				if (state === 'uploading') {
					uploader.stop();
				} else {
					uploader.upload();
				}
			});
		});
	</script>
}

<!-- general form elements -->
<div class="box box-primary">
	<div class="box-header with-border">
		<h3 class="box-title">主题模板 - 上传本地主题模板</h3>
	</div>
	<!-- /.box-header -->
	<!-- form start -->
	<div class="box-body">
		@{ Html.RenderPartial("_MessagePartial"); }
		<div class="form-group">
			<div id="js-uploader">
				<!-- 用来存放文件信息 -->
				<div id="js-thelist"></div>
				<div class="btn-group">
					<div id="js-picker" style="display: none;">选择文件</div>
					<button class="btn btn-file" onclick="pickerFile()">选择文件</button>
				</div>
			</div>
		</div>
	</div>
	<div class="box-footer">
		<div class="btn-group">
			@if (TempData["RedirectUrl"] != null)
			{
				<a class="btn btn-default" href="@TempData["RedirectUrl"].ToString()">返回</a>
			}
			else
			{
				<a class="btn btn-default" href="javascript:history.go(-1);">返回</a>
			}
			<button id="js-upload-btn" class="btn btn-primary">开始上传</button>
		</div>
	</div>
</div>

